<template>
  <div class="userManage">
    <!--搜索框-->
    <el-form :inline="true" :model="searchForm" class="form_class">
      <!--用户名-->
      <el-form-item label="用户名" label-width="100px">
        <el-input v-model="searchForm.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <!--电话-->
      <el-form-item label="电话" label-width="100px">
        <el-input v-model="searchForm.phone" placeholder="电话号码"></el-input>
      </el-form-item>
      <!--角色编号-->
      <el-form-item label="角色id" label-width="80px">
        <el-select v-model="searchForm.roleid" placeholder="请选择">
          <el-option v-for="role in searchForm.roleMenu" :key="role.roleid"
                     :label="role.rolename" :value="role.roleid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!--表格体-->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名"
        width="200">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="300">
      </el-table-column>
      <el-table-column label="角色" prop="roles" width="200">
        <template slot-scope="scope">
          <!--          <el-tag type="info" effect="light" v-show="!scope.row.isEdit" @click="changeRole(scope)">{{scope.row.roles}}</el-tag>-->
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            v-show="!scope.row.editFlag"-->
          <!--            @click="handleEdit(scope.$index, scope.row)">{{scope.row.roles}}</el-button>-->
          <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{scope.row.roles}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item v-for="( item , index ) in searchForm.roleMenu"
                v-text="item.rolename" :command={row:scope.row,roleid:item.roleid} :key="index"></el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏目-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageForm.pageNum"
        :page-sizes="[5,10,15,20]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from '../../utils/request'

export default {
  name: 'UserManage',
  methods: {
    async initAndSearch () {
      let response = await axios({
        method: 'get',
        url: 'admin/user/getUsersByInput',
        params: {
          userName: this.searchForm.userName,
          phone: this.searchForm.phone,
          roleid: this.searchForm.roleid,
          pageNum: this.pageForm.pageNum,
          pageSize: this.pageForm.pageSize
        }
      })
      console.log(response)
      if (response.code === '200') {
        let data = response.data
        this.pageForm.total = data.total
        this.tableData = data.list
        console.log(this.searchForm.roleMenu)
      } else {
        this.$message.error(response.messages)
      }
    },
    async initRoleMenu () {
      let response = await axios({
        method: 'get',
        url: 'admin/role/getAllRoles'
      })
      if (response.code === '200') {
        this.searchForm.roleMenu = response.data
        console.log(response.data)
      } else {
        this.$message.error(response.messages)
      }
    },
    // 搜索框
    onSubmit () {
      this.initAndSearch()
    },
    // 表格体
    handleCommand (command) {
      this.updateRoleByidId(command)
    },
    async updateRoleByidId (item) {
      let response = await axios({
        method: 'put',
        url: '/admin/user/updateUserRoleById',
        params: {
          id: item.row.id,
          roleid: item.roleid
        }
      })
      if (response.code === '200') {
        this.$message.success('修改权限成功')
        this.initAndSearch()
      } else { this.$message.error(response.message) }
    },
    // 分页栏
    handleSizeChange (val) {
      this.pageForm.pageSize = val
      console.log(`每页 ${val} 条`)
      this.initAndSearch()
    },
    handleCurrentChange (val) {
      this.pageForm.pageNum = val
      console.log(`当前页: ${val}`)
      this.initAndSearch()
    }
  },
  created () {
    this.initAndSearch()
    this.initRoleMenu()
  },
  data () {
    return {
      // 搜索框参数
      searchForm: {
        userName: '',
        phone: '',
        roleid: '',
        roleMenu: []
      },
      // 表格窗口
      tableData: [],
      // 分页栏目参数
      pageForm: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      }
    }
  }
}

</script>

<style scoped>

</style>
